<template>
  <view v-if="animateCountdownData && animateCountdownData.minute" class="p-countdown-content">
    <view class="_t1">优惠时间仅剩</view>
    <view class="_time">
      <view class="_clock">{{ animateCountdownData.minute }}</view>
      <text class="_symbol">:</text>
      <view class="_clock">{{ animateCountdownData.second }}</view>
      <text class="_symbol">:</text>
      <view class="_clock">
        <view class="_millisecond">
          <text v-for="item in numberList" :key="item" class="_millisecond-list">{{item}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'PCountdown',
  components: {},
  props: {},
  data() {
    return {
      numberList: ['99', '86', '75', '63', '54', '43', '32', '21', '11', '00']
    };
  },
  computed: {
    ...mapState({
      // 动画弹框倒计时
      animateCountdownData: state => state['pages'].animateCountdownData
    })
  }
};
</script>

<style lang="scss">
.p-countdown-content{
  padding: 10px 24px;
  ._t1{ font-size: 26px; color: #fff; text-align: center; margin-bottom: 12px; }
  ._time{
    display: flex; align-items: center; justify-content: center;
    ._clock{ width: 40px; height: 40px; background: rgba(255, 255, 255, 0.3); border-radius: 6px; font-size: 26px; color: #FFFFFF; display: flex; align-items: center; justify-content: center;}
    ._symbol{ font-size: 26px; color: #FFFFFF; text-align: center; margin: 0 8px;}
    ._millisecond{
      overflow: hidden; height: 100%;
      ._millisecond-list{ display: flex; align-items: center; justify-content: center; animation: frames 1s steps(10) infinite; overflow: hidden; height: 100%;}
    }
  }
}
@keyframes frames {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-1000%);
  }
}
</style>
